<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/view/common/kendocommon.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>头像</title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://oatest.dibabo.cn/ShopAdmin/Scripts/webcam/jquery.webcam.as3.js"></script>
  
</head>
<body>
        <div id="win" style="border:1px solid red;display: none;">
            <table>
                <tr>
                    <td><video id="win_video" width="400" height="300" autoplay="autoplay"></video></td>
                    <td><canvas id="win_canvas" width="400" height="300"></canvas></td>
                </tr>
                <tr>
                    <td>
                        <span>摄像头列表</span>
                        <select id="win_list"></select>
                        <input id="win_change" type="button" value="切换" />
                        <input id="win_photo" type="button" value="拍照" />
                    </td>
                    <td>
                        <input id="win_confirm" type="button" value="确定使用这张" />
                    </td>
                </tr>
            </table>

        </div>
        
            <!--采集照片window-->
    <div id="winTakePhoto">
        <table class="width100p">
            <tr>
                <td>
                    <div id="webcam"></div>
                </td>
                <td>
                 <img id="hPhoto" alt="" style="width:400;height:300" src="http://spera.img-cn-hangzhou.aliyuncs.com/default_image/h_default.png" />
 				</td>
            </tr>
            
        </table>
              
    </div>
	<div>
		<table class="width100p">
			<tr>
				<td>
				   <span>摄像头</span> 
				   <select id="selCameras"></select> 
				   <input type="button" id="btnTakePhoto" class="k-button k-primary width80" value="拍照" /> 
				   <input type="button" id="submitPhoto" class="k-button k-primary width80" value="提交" onclick="return submitPhoto()" />
				   </td>
			</tr>
		</table>
	</div>

        <script type="text/javascript">
       var submitPhoto=function(){
            var dataImg=$('#hPhoto').attr('src');
           
   		$.ajax({
               url: '${path}/assist/addPhoto',                                 
               data: {"c_user_id":"${param.c_user_id}","formImgData":dataImg},//$('#form').serialize(),
               dataType: 'json',
               type:'post',
               success: function(data) {
               	if(data.status=='1'){
               		parent.successUpdate();
               		
               	}else{
               		alert(data.msg);
               	}
               	
               }
           });
       }
        
        
        $(function(){
            var selCameras = $("#selCameras");
        	var cameraApi=null;
        	
        	$("#webcam").webcam({

                previewWidth: 400,
                previewHeight: 300,

                resolutionWidth: 400,
                resolutionHeight: 300,

                swffile: "http://oatest.dibabo.cn/ShopAdmin/Scripts/webcam/sAS3Cam.swf?v=" + Math.random(),

                StageScaleMode: 'noScale',
                StageAlign: 'TL',

                noCameraFound: function () {
                    this.debug('error', 'Web camera is not available');
                },

                swfApiFail: function (e) {
                    this.debug('error', 'Internal camera plugin error');
                },

                cameraDisabled: function () {
                    this.debug('error', 'Please allow access to your camera');
                },

                debug: function (type, string) {
                    if (type == 'error') {
                        console.log(type + ":" + string);
                    }
                },

                cameraEnabled: function () {
                    cameraApi = this;
                    if (cameraApi.isCameraEnabled) {
                        return;
                    } else {
                        cameraApi.isCameraEnabled = true;
                    }
                    var cams = cameraApi.getCameraList();

                    for (var i in cams) {
                        selCameras.append("<option value='" + i + "'>" + cams[i] + "</option>");
                    }

                    cameraApi.setCamera(selCameras.find('option:selected').val());

                    selCameras.change(function (e) {
                        var success = cameraApi.setCamera($(this).val());
                    });

                    $('#btnTakePhoto').on('click', function (e) {
                        var result = cameraApi.save();
                        if (result && result.length) {
						
                        $('#hPhoto').attr('src', 'data:image/jpeg;base64,' + result);

                        } else {
                            cameraApi.debug('error', 'Broken camera');
                        }
                    });
                }
            });
        	
        });
        </script>
</body>
</html>
